<template>
    <div>
        <div id="main2"  style="width: 100%;height: 340px; margin-top: 50px;margin-left: 60px;"></div>
    </div>
</template>
<script>
    import * as echarts from 'echarts';
export default {

   
    //   props: {                //接受父组件传递来的数据
    //   items: {
    //     type: Array,
    //     default () {        //默认数据，没有数剧的情况下启用
    //       return [{name: '生物', value: 95, max: '100'}, {name: '数学', value: 55, max: '100'}, {name: '语文', value: 86, max: '100'}, {name: '物理', value: 54, max: '100'}, {name: '美术', value: 59, max: '100'}]
    //     }
    //   },
    // },

    data(){
      return{
          retData: [],
      }
    },

    // mounted() {
    //   this.Draw()
    // },

    methods: {


      // getData(){
      //   console.log(this.props.data, 'prop')
      //       this.$request({
      //         url: '/home/getHome',
      //         method: 'get'
      //     }).then(res => {
      //         this.Draw(res.data)
      //     })
      // },

      Draw(data){
      var  chartLine = echarts.init(document.getElementById('main2'));    
    
      console.log(this.items, 'items')
      let retData = [];
      let title = data.title

      data.retDatas.forEach(item => {
          var key = {};
          key.value = item.val;
          key.name = item.valName;
          retData.push(key)
      })

      

 
  
  // 指定图表的配置项和数据
  var option = {
      title: {
      text: '订单分布地区',
      left: 'left'
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'right',
      data:[title]
    },
    series: [
      {
        name: title,
        type: 'pie',
        radius: '50%',
        data: retData,      
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
 };

 // 使用刚指定的配置项和数据显示图表。
    chartLine.setOption(option);
      }
    },

}
</script>
<style>
    
</style>